@reforma/components 0.0.0-stage → 0.1.0

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,35 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { SemanticColor } from '../types';
+export type AlertColor = SemanticColor;
+export type AlertProps = {
+    /** Surface tint. `secondary` is the default plate. */
+    color?: AlertColor;
+    className?: string;
+    children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
+export type AlertIconProps = HTMLAttributes<HTMLSpanElement>;
+export type AlertTitleProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
+export type AlertDescriptionProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
+export type AlertActionProps = HTMLAttributes<HTMLDivElement>;
+export declare function Alert({ color, className, role, children, ...props }: AlertProps): import("react").JSX.Element;
+export declare namespace Alert {
+    var displayName: string;
+}
+/** Decorative icon slot. Hidden from assistive tech — title carries the meaning. */
+export declare function AlertIcon({ className, ...props }: AlertIconProps): import("react").JSX.Element;
+export declare namespace AlertIcon {
+    var displayName: string;
+}
+export declare function AlertTitle({ className, children, ...props }: AlertTitleProps): import("react").JSX.Element;
+export declare namespace AlertTitle {
+    var displayName: string;
+}
+export declare function AlertDescription({ className, children, ...props }: AlertDescriptionProps): import("react").JSX.Element;
+export declare namespace AlertDescription {
+    var displayName: string;
+}
+export declare function AlertAction({ className, ...props }: AlertActionProps): import("react").JSX.Element;
+export declare namespace AlertAction {
+    var displayName: string;
+}
+//# sourceMappingURL=Alert.d.ts.map

package/dist/Alert/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,EAA4B,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAC7D,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAC5E,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAClF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE9D,wBAAgB,KAAK,CAAC,EAClB,KAAK,EACL,SAAS,EACT,IAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,UAAU,+BAkBZ;yBAxBe,KAAK;;;AA0BrB,oFAAoF;AACpF,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAEhE;yBAFe,SAAS;;;AAIzB,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAM5E;yBANe,UAAU;;;AAQ1B,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,+BAMxF;yBANe,gBAAgB;;;AAQhC,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAEpE;yBAFe,WAAW"}

package/dist/Alert/Alert.js

@@ -0,0 +1,107 @@
+import { cn as a } from "@reforma/lib";
+import { Children as A, isValidElement as l } from "react";
+import { Text as c } from "../Text/Text.js";
+import r from "./Alert.module.css.js";
+import { jsxs as N, jsx as o } from "react/jsx-runtime";
+function v({
+  color: t,
+  className: e,
+  role: i = "alert",
+  children: s,
+  ...n
+}) {
+  const p = t === "secondary" ? void 0 : t, {
+    icon: u,
+    body: f,
+    action: y
+  } = T(s);
+  return /* @__PURE__ */ N("div", {
+    role: i,
+    className: a(r.alert, e),
+    "data-color": p,
+    ...n,
+    children: [u, /* @__PURE__ */ o("div", {
+      className: r.body,
+      children: f
+    }), y]
+  });
+}
+function m({
+  className: t,
+  ...e
+}) {
+  return /* @__PURE__ */ o("span", {
+    "aria-hidden": !0,
+    className: a(r.icon, t),
+    ...e
+  });
+}
+function x({
+  className: t,
+  children: e,
+  ...i
+}) {
+  return /* @__PURE__ */ o(c, {
+    as: "div",
+    variant: "heading-5",
+    "data-inline-links": !0,
+    className: a(r.title, t),
+    ...i,
+    children: e
+  });
+}
+function b({
+  className: t,
+  children: e,
+  ...i
+}) {
+  return /* @__PURE__ */ o(c, {
+    as: "div",
+    variant: "sm",
+    "data-inline-links": !0,
+    className: a(r.description, t),
+    ...i,
+    children: e
+  });
+}
+function d({
+  className: t,
+  ...e
+}) {
+  return /* @__PURE__ */ o("div", {
+    className: a(r.action, t),
+    ...e
+  });
+}
+function T(t) {
+  let e, i;
+  const s = [];
+  return A.forEach(t, (n) => {
+    if (/* @__PURE__ */ l(n) && n.type === m) {
+      e = n;
+      return;
+    }
+    if (/* @__PURE__ */ l(n) && n.type === d) {
+      i = n;
+      return;
+    }
+    s.push(n);
+  }), {
+    icon: e,
+    body: s,
+    action: i
+  };
+}
+v.displayName = "Alert";
+m.displayName = "AlertIcon";
+x.displayName = "AlertTitle";
+b.displayName = "AlertDescription";
+d.displayName = "AlertAction";
+export {
+  v as Alert,
+  d as AlertAction,
+  b as AlertDescription,
+  m as AlertIcon,
+  x as AlertTitle
+};
+//# sourceMappingURL=Alert.js.map

package/dist/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../../src/Alert/Alert.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\nimport { Children, isValidElement, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { Text } from '../Text';\nimport styles from './Alert.module.css';\n\nimport type { SemanticColor } from '../types';\n\nexport type AlertColor = SemanticColor;\n\nexport type AlertProps = {\n    /** Surface tint. `secondary` is the default plate. */\n    color?: AlertColor;\n    className?: string;\n    children?: ReactNode;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;\n\nexport type AlertIconProps = HTMLAttributes<HTMLSpanElement>;\nexport type AlertTitleProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'>;\nexport type AlertDescriptionProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'>;\nexport type AlertActionProps = HTMLAttributes<HTMLDivElement>;\n\nexport function Alert({\n    color,\n    className,\n    role = 'alert',\n    children,\n    ...props\n}: AlertProps) {\n    const tint = color === 'secondary' ? undefined : color;\n    const { icon, body, action } = splitSlots(children);\n\n    return (\n        <div\n            role={ role }\n            className={ cn(styles.alert, className) }\n            data-color={ tint }\n            { ...props }\n        >\n            { icon }\n            <div className={ styles.body }>\n                { body }\n            </div>\n            { action }\n        </div>\n    );\n}\n\n/** Decorative icon slot. Hidden from assistive tech — title carries the meaning. */\nexport function AlertIcon({ className, ...props }: AlertIconProps) {\n    return <span aria-hidden className={ cn(styles.icon, className) } { ...props } />;\n}\n\nexport function AlertTitle({ className, children, ...props }: AlertTitleProps) {\n    return (\n        <Text as=\"div\" variant=\"heading-5\" data-inline-links className={ cn(styles.title, className) } { ...props }>\n            { children }\n        </Text>\n    );\n}\n\nexport function AlertDescription({ className, children, ...props }: AlertDescriptionProps) {\n    return (\n        <Text as=\"div\" variant=\"sm\" data-inline-links className={ cn(styles.description, className) } { ...props }>\n            { children }\n        </Text>\n    );\n}\n\nexport function AlertAction({ className, ...props }: AlertActionProps) {\n    return <div className={ cn(styles.action, className) } { ...props } />;\n}\n\nfunction splitSlots(children: ReactNode) {\n    let icon: ReactNode;\n    let action: ReactNode;\n    const body: ReactNode[] = [];\n\n    Children.forEach(children, (child) => {\n        if (isValidElement(child) && child.type === AlertIcon) {\n            icon = child;\n\n            return;\n        }\n\n        if (isValidElement(child) && child.type === AlertAction) {\n            action = child;\n\n            return;\n        }\n\n        body.push(child);\n    });\n\n    return { icon, body, action };\n}\n\nAlert.displayName = 'Alert';\nAlertIcon.displayName = 'AlertIcon';\nAlertTitle.displayName = 'AlertTitle';\nAlertDescription.displayName = 'AlertDescription';\nAlertAction.displayName = 'AlertAction';\n"],"names":["Alert","color","className","role","children","props","tint","icon","body","action","splitSlots","cn","styles","_jsx","AlertIcon","AlertTitle","Text","AlertDescription","AlertAction","Children","child","isValidElement"],"mappings":";;;;;AAKO,SAASA,EAAM;AAAA,EACpB,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMC,IAAOL,MAAU,cAAc,SAAYA,GAC3C;AAAA,IACJ,MAAAM;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC;AAAA,EAAA,IACEC,EAAWN,CAAQ;AACvB,2BAA0B,OAAO;AAAA,IAC/B,MAAAD;AAAA,IACA,WAAWQ,EAAGC,EAAO,OAAOV,CAAS;AAAA,IACrC,cAAcI;AAAA,IACd,GAAGD;AAAA,IACH,UAAU,CAACE,GAAmBM,gBAAAA,EAAK,OAAO;AAAA,MACxC,WAAWD,EAAO;AAAA,MAClB,UAAUJ;AAAA,IAAA,CACX,GAAGC,CAAM;AAAA,EAAA,CACX;AACH;AAGO,SAASK,EAAU;AAAA,EACxB,WAAAZ;AAAA,EACA,GAAGG;AACL,GAAG;AACD,2BAAyB,QAAQ;AAAA,IAC/B,eAAe;AAAA,IACf,WAAWM,EAAGC,EAAO,MAAMV,CAAS;AAAA,IACpC,GAAGG;AAAA,EAAA,CACJ;AACH;AACO,SAASU,EAAW;AAAA,EACzB,WAAAb;AAAA,EACA,UAAAE;AAAA,EACA,GAAGC;AACL,GAAG;AACD,2BAAyBW,GAAM;AAAA,IAC7B,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,qBAAqB;AAAA,IACrB,WAAWL,EAAGC,EAAO,OAAOV,CAAS;AAAA,IACrC,GAAGG;AAAA,IACH,UAAAD;AAAA,EAAA,CACD;AACH;AACO,SAASa,EAAiB;AAAA,EAC/B,WAAAf;AAAA,EACA,UAAAE;AAAA,EACA,GAAGC;AACL,GAAG;AACD,2BAAyBW,GAAM;AAAA,IAC7B,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,qBAAqB;AAAA,IACrB,WAAWL,EAAGC,EAAO,aAAaV,CAAS;AAAA,IAC3C,GAAGG;AAAA,IACH,UAAAD;AAAA,EAAA,CACD;AACH;AACO,SAASc,EAAY;AAAA,EAC1B,WAAAhB;AAAA,EACA,GAAGG;AACL,GAAG;AACD,2BAAyB,OAAO;AAAA,IAC9B,WAAWM,EAAGC,EAAO,QAAQV,CAAS;AAAA,IACtC,GAAGG;AAAA,EAAA,CACJ;AACH;AACA,SAASK,EAAWN,GAAU;AAC5B,MAAIG,GACAE;AACJ,QAAMD,IAAO,CAAA;AACb,SAAAW,EAAS,QAAQf,GAAU,CAAAgB,MAAS;AAClC,QAAiB,gBAAAC,EAAeD,CAAK,KAAKA,EAAM,SAASN,GAAW;AAClE,MAAAP,IAAOa;AACP;AAAA,IACF;AACA,QAAiB,gBAAAC,EAAeD,CAAK,KAAKA,EAAM,SAASF,GAAa;AACpE,MAAAT,IAASW;AACT;AAAA,IACF;AACA,IAAAZ,EAAK,KAAKY,CAAK;AAAA,EACjB,CAAC,GACM;AAAA,IACL,MAAAb;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC;AAAA,EAAA;AAEJ;AACAT,EAAM,cAAc;AACpBc,EAAU,cAAc;AACxBC,EAAW,cAAc;AACzBE,EAAiB,cAAc;AAC/BC,EAAY,cAAc;"}

package/dist/Alert/Alert.module.css

@@ -0,0 +1 @@
+@layer components{.Alert_alert_U1C8D5{--reforma-alert-bg: var(--color-secondary-muted-light);--reforma-alert-fg: var(--color-text);display:flex;flex-direction:row;align-items:center;gap:var(--spacing-md);border-radius:calc(var(--radius-md) * var(--squircle-radius-factor));padding:var(--spacing-xl);width:100%;corner-shape:superellipse(var(--squircle-value));background-color:var(--reforma-alert-bg);color:var(--reforma-alert-fg);text-align:start}.Alert_alert_U1C8D5[data-color=primary]{--reforma-alert-bg: var(--color-primary-muted-light);--reforma-alert-fg: var(--color-primary-text)}.Alert_alert_U1C8D5[data-color=accent]{--reforma-alert-bg: var(--color-accent-muted-light);--reforma-alert-fg: var(--color-accent-text)}.Alert_alert_U1C8D5[data-color=success]{--reforma-alert-bg: var(--color-success-muted-light);--reforma-alert-fg: var(--color-success-text)}.Alert_alert_U1C8D5[data-color=warning]{--reforma-alert-bg: var(--color-warning-muted-light)}.Alert_alert_U1C8D5[data-color=danger]{--reforma-alert-bg: var(--color-danger-muted-light);--reforma-alert-fg: var(--color-danger-text)}.Alert_icon_dX8Dmv{display:inline-flex;flex-shrink:0;justify-content:center;align-items:center;color:currentColor}.Alert_body_pdcCid{display:flex;flex:1;flex-direction:column;gap:var(--spacing-xs);min-width:0}.Alert_description_zZFSUj{opacity:.8}.Alert_action_2SGZ3i{flex-shrink:0}}

package/dist/Alert/Alert.module.css.js

@@ -0,0 +1,16 @@
+const t = "Alert_alert_U1C8D5", o = "Alert_icon_dX8Dmv", c = "Alert_body_pdcCid", n = "Alert_description_zZFSUj", e = "Alert_action_2SGZ3i", i = {
+  alert: t,
+  icon: o,
+  body: c,
+  description: n,
+  action: e
+};
+export {
+  e as action,
+  t as alert,
+  c as body,
+  i as default,
+  n as description,
+  o as icon
+};
+//# sourceMappingURL=Alert.module.css.js.map

package/dist/Alert/Alert.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/Alert/index.d.ts

@@ -0,0 +1,3 @@
+export { Alert, AlertAction, AlertDescription, AlertIcon, AlertTitle, } from './Alert';
+export type { AlertActionProps, AlertColor, AlertDescriptionProps, AlertIconProps, AlertProps, AlertTitleProps, } from './Alert';
+//# sourceMappingURL=index.d.ts.map

package/dist/Alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,UAAU,GACb,MAAM,SAAS,CAAC;AAEjB,YAAY,EACR,gBAAgB,EAChB,UAAU,EACV,qBAAqB,EACrB,cAAc,EACd,UAAU,EACV,eAAe,GAClB,MAAM,SAAS,CAAC"}

package/dist/Alert/index.js

@@ -0,0 +1,9 @@
+import { Alert as r, AlertAction as l, AlertDescription as A, AlertIcon as o, AlertTitle as i } from "./Alert.js";
+export {
+  r as Alert,
+  l as AlertAction,
+  A as AlertDescription,
+  o as AlertIcon,
+  i as AlertTitle
+};
+//# sourceMappingURL=index.js.map

package/dist/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/AngleControl/AngleControl.d.ts

@@ -0,0 +1,10 @@
+import type { AngleControlProps } from './angle';
+/**
+ * Compact circular CSS angle control.
+ * Opens the full circular picker by morphing the compact control into a floating dial.
+ */
+export declare function AngleControl({ ref, value, defaultValue, onChange, onChangeEnd, unit, presets, snap, snapThresholdDeg, isDisabled, isReadOnly, min, max, step, precision, valueRange, presetBehavior, size, expandedSize, showInlineInput, className, popoverClassName, style, isOpen, defaultOpen, onOpenChange, ariaLabel, ariaLabelledBy, }: AngleControlProps): import("react").JSX.Element;
+export declare namespace AngleControl {
+    var displayName: string;
+}
+//# sourceMappingURL=AngleControl.d.ts.map

package/dist/AngleControl/AngleControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AngleControl.d.ts","sourceRoot":"","sources":["../../src/AngleControl/AngleControl.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAqBjD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EACzB,GAAG,EACH,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,GAAG,EACH,GAAG,EACH,IAAI,EACJ,SAAS,EACT,UAAU,EACV,cAAc,EACd,IAAW,EACX,YAA0C,EAC1C,eAAsB,EACtB,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,WAAW,EACX,YAAY,EACZ,SAAmB,EACnB,cAAc,GACjB,EAAE,iBAAiB,+BAqMnB;yBAlOe,YAAY"}

package/dist/AngleControl/AngleControl.js

@@ -0,0 +1,207 @@
+import { MOTION_EASE_UI as fe } from "@reforma/constants";
+import { cn as _, mergeRefs as ve } from "@reforma/lib";
+import { useReducedMotion as ye, AnimatePresence as ge, motion as C } from "motion/react";
+import { useRef as F, useState as Ee, useId as he, useCallback as h, useEffect as T } from "react";
+import { useOverlay as we, useDialog as Ae, mergeProps as Pe, FocusScope as Ne } from "react-aria";
+import { createPortal as Se } from "react-dom";
+import { Button as xe } from "../Button/Button.js";
+import { Show as b } from "../Show/Show.js";
+import { ANGLE_PREVIEW_GEOMETRY as Ie, DEFAULT_ANGLE_EXPANDED_SIZE as M } from "./angle.js";
+import l from "./AngleControl.module.css.js";
+import { AngleDial as De } from "./AngleDial.js";
+import { AnglePreview as Ge } from "./AnglePreview.js";
+import { useAngleState as Oe } from "./useAngleState.js";
+import { jsxs as V, Fragment as ze, jsx as e } from "react/jsx-runtime";
+import { useControlledState as _e } from "@react-stately/utils";
+const L = {
+  duration: 0.2,
+  ease: fe
+};
+function Ce(a, s) {
+  return {
+    left: a.right - s,
+    top: a.top,
+    scale: a.width / s
+  };
+}
+function Fe({
+  ref: a,
+  value: s,
+  defaultValue: k,
+  onChange: R,
+  onChangeEnd: $,
+  unit: j,
+  presets: U,
+  snap: Y,
+  snapThresholdDeg: H,
+  isDisabled: f,
+  isReadOnly: o,
+  min: W,
+  max: X,
+  step: Z,
+  precision: w,
+  valueRange: A,
+  presetBehavior: q,
+  size: P = "sm",
+  expandedSize: v = M,
+  showInlineInput: J = !0,
+  className: K,
+  popoverClassName: Q,
+  style: B,
+  isOpen: ee,
+  defaultOpen: oe,
+  onOpenChange: te,
+  ariaLabel: y = "Angle",
+  ariaLabelledBy: c
+}) {
+  const N = F(null), g = F(null), [E, S] = Ee(null), [n, m] = _e(ee, oe ?? !1, te), re = ye(), x = he(), I = Oe({
+    value: s,
+    defaultValue: k,
+    unit: j,
+    min: W,
+    max: X,
+    precision: w,
+    valueRange: A,
+    onChange: R,
+    onChangeEnd: $
+  }), r = f || o, ne = typeof document > "u" ? null : document.body, D = E != null, i = !r && n && D, G = E?.scale ?? 1, d = Number.isFinite(v) && v > 0 ? v : M, ie = {
+    "--reforma-angle-preview-size": `${Ie[P].size}px`,
+    ...B
+  }, t = h(() => {
+    const p = N.current?.getBoundingClientRect();
+    return p ? (S(Ce(p, d)), !0) : !1;
+  }, [d]), ae = h(() => {
+    r || !t() || m(!0);
+  }, [r, m, t]), u = h(() => m(!1), [m]), {
+    overlayProps: le,
+    underlayProps: se
+  } = we({
+    isOpen: i,
+    isDismissable: !0,
+    onClose: u
+  }, g), {
+    dialogProps: ce
+  } = Ae({
+    "aria-label": c ? void 0 : `${y} picker`,
+    "aria-labelledby": c
+  }, g), me = Pe(le, ce);
+  T(() => {
+    if (!(!n || r))
+      return t(), window.addEventListener("resize", t), window.addEventListener("scroll", t, !0), () => {
+        window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0);
+      };
+  }, [r, n, t]), T(() => {
+    n && r && u();
+  }, [u, r, n]);
+  const O = !re && D, de = O ? {
+    opacity: 0.92,
+    scale: G
+  } : {
+    opacity: 0
+  }, ue = O ? {
+    opacity: 0,
+    scale: G
+  } : {
+    opacity: 0
+  }, pe = n ? u : ae;
+  return /* @__PURE__ */ V(ze, {
+    children: [/* @__PURE__ */ e(xe, {
+      ref: ve(N, a),
+      variant: "transparent",
+      size: "unset",
+      iconOnly: !0,
+      className: _(l.trigger, K),
+      style: ie,
+      "data-readonly": o || void 0,
+      "data-overlay-open": i || void 0,
+      isDisabled: f,
+      "aria-label": y,
+      "aria-labelledby": c,
+      "aria-disabled": o || void 0,
+      "aria-haspopup": o ? void 0 : "dialog",
+      "aria-expanded": o ? void 0 : i,
+      "aria-controls": i ? x : void 0,
+      tabIndex: o ? -1 : void 0,
+      onPress: o ? void 0 : pe,
+      children: /* @__PURE__ */ e(Ge, {
+        normalizedDegrees: I.normalizedDegrees,
+        size: P
+      })
+    }), /* @__PURE__ */ e(b, {
+      when: ne,
+      children: (p) => /* @__PURE__ */ Se(/* @__PURE__ */ e(ge, {
+        initial: !1,
+        onExitComplete: () => {
+          i || S(null);
+        },
+        children: /* @__PURE__ */ e(b, {
+          when: i ? E : null,
+          children: (z) => /* @__PURE__ */ V("div", {
+            className: l.overlayLayer,
+            "data-modal-clickout-layer": !0,
+            children: [/* @__PURE__ */ e(C.div, {
+              className: l.overlay,
+              initial: {
+                opacity: 0
+              },
+              animate: {
+                opacity: 1
+              },
+              exit: {
+                opacity: 0
+              },
+              transition: L,
+              onPointerDown: se.onPointerDown
+            }), /* @__PURE__ */ e(Ne, {
+              contain: !0,
+              restoreFocus: !0,
+              children: /* @__PURE__ */ e(C.div, {
+                className: _(l.floatingDial, Q),
+                style: {
+                  "--reforma-angle-size": `${d}px`,
+                  left: z.left,
+                  top: z.top
+                },
+                initial: de,
+                animate: {
+                  opacity: 1,
+                  scale: 1
+                },
+                exit: ue,
+                transition: L,
+                children: /* @__PURE__ */ e("div", {
+                  ...me,
+                  ref: g,
+                  id: x,
+                  className: l.dialogSurface,
+                  children: /* @__PURE__ */ e(De, {
+                    angle: I,
+                    presets: U,
+                    snap: Y,
+                    snapThresholdDeg: H,
+                    isDisabled: f,
+                    isReadOnly: o,
+                    step: Z,
+                    precision: w,
+                    valueRange: A,
+                    presetBehavior: q,
+                    controlSize: d,
+                    showInlineInput: J,
+                    ariaLabel: y,
+                    ariaLabelledBy: c,
+                    autoFocus: !0
+                  })
+                })
+              })
+            })]
+          })
+        })
+      }), p)
+    })]
+  });
+}
+Fe.displayName = "AngleControl";
+export {
+  Fe as AngleControl
+};
+//# sourceMappingURL=AngleControl.js.map

package/dist/AngleControl/AngleControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AngleControl.js","sources":["../../src/AngleControl/AngleControl.tsx"],"sourcesContent":["import { MOTION_EASE_UI } from '@reforma/constants';\nimport { cn, mergeRefs } from '@reforma/lib';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { useCallback, useEffect, useId, useRef, useState } from 'react';\nimport { FocusScope, mergeProps, useDialog, useOverlay } from 'react-aria';\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '../Button';\nimport { useControlledState } from '../hooks';\nimport { Show } from '../Show';\nimport { ANGLE_PREVIEW_GEOMETRY, DEFAULT_ANGLE_EXPANDED_SIZE } from './angle';\nimport styles from './AngleControl.module.css';\nimport { AngleDial } from './AngleDial';\nimport { AnglePreview } from './AnglePreview';\nimport { useAngleState } from './useAngleState';\n\nimport type { CSSProperties, HTMLAttributes } from 'react';\nimport type { AngleControlProps } from './angle';\n\ninterface OverlayGeometry {\n    left: number;\n    top: number;\n    scale: number;\n}\n\nconst OVERLAY_TRANSITION = {\n    duration: 0.2,\n    ease: MOTION_EASE_UI,\n};\n\nfunction getOverlayGeometry(rect: DOMRect, expandedSize: number): OverlayGeometry {\n    return {\n        left: rect.right - expandedSize,\n        top: rect.top,\n        scale: rect.width / expandedSize,\n    };\n}\n\n/**\n * Compact circular CSS angle control.\n * Opens the full circular picker by morphing the compact control into a floating dial.\n */\nexport function AngleControl({\n    ref,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    unit,\n    presets,\n    snap,\n    snapThresholdDeg,\n    isDisabled,\n    isReadOnly,\n    min,\n    max,\n    step,\n    precision,\n    valueRange,\n    presetBehavior,\n    size = 'sm',\n    expandedSize = DEFAULT_ANGLE_EXPANDED_SIZE,\n    showInlineInput = true,\n    className,\n    popoverClassName,\n    style,\n    isOpen,\n    defaultOpen,\n    onOpenChange,\n    ariaLabel = 'Angle',\n    ariaLabelledBy,\n}: AngleControlProps) {\n    const triggerRef = useRef<HTMLButtonElement | null>(null);\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    const [overlayGeometry, setOverlayGeometry] = useState<OverlayGeometry | null>(null);\n    const [open, setOpen] = useControlledState(isOpen, defaultOpen ?? false, onOpenChange);\n    const prefersReducedMotion = useReducedMotion();\n    const overlayId = useId();\n    const angle = useAngleState({\n        value,\n        defaultValue,\n        unit,\n        min,\n        max,\n        precision,\n        valueRange,\n        onChange,\n        onChangeEnd,\n    });\n    const isInactive = isDisabled || isReadOnly;\n    const portalTarget = typeof document === 'undefined' ? null : document.body;\n    const hasOverlayGeometry = overlayGeometry != null;\n    const isOverlayVisible = !isInactive && open && hasOverlayGeometry;\n    const overlayScale = overlayGeometry?.scale ?? 1;\n    const isValidExpandedSize = Number.isFinite(expandedSize) && expandedSize > 0;\n    const resolvedExpandedSize = isValidExpandedSize\n        ? expandedSize\n        : DEFAULT_ANGLE_EXPANDED_SIZE;\n    const previewGeometry = ANGLE_PREVIEW_GEOMETRY[size];\n    const triggerStyle = {\n        '--reforma-angle-preview-size': `${ previewGeometry.size }px`,\n        ...style,\n    } as CSSProperties;\n\n    const updateOverlayGeometry = useCallback((): boolean => {\n        const rect = triggerRef.current?.getBoundingClientRect();\n\n        if (!rect) {\n            return false;\n        }\n\n        setOverlayGeometry(getOverlayGeometry(rect, resolvedExpandedSize));\n\n        return true;\n    }, [resolvedExpandedSize]);\n\n    const openOverlay = useCallback(() => {\n        if (isInactive || !updateOverlayGeometry()) {\n            return;\n        }\n\n        setOpen(true);\n    }, [isInactive, setOpen, updateOverlayGeometry]);\n\n    const closeOverlay = useCallback(() => setOpen(false), [setOpen]);\n\n    const { overlayProps, underlayProps } = useOverlay({\n        isOpen: isOverlayVisible,\n        isDismissable: true,\n        onClose: closeOverlay,\n    }, overlayRef);\n    const { dialogProps } = useDialog({\n        'aria-label': ariaLabelledBy ? undefined : `${ ariaLabel } picker`,\n        'aria-labelledby': ariaLabelledBy,\n    }, overlayRef);\n    const floatingDialProps = mergeProps(overlayProps, dialogProps) as HTMLAttributes<HTMLDivElement>;\n\n    useEffect(() => {\n        if (!open || isInactive) {\n            return;\n        }\n\n        updateOverlayGeometry();\n\n        window.addEventListener('resize', updateOverlayGeometry);\n        window.addEventListener('scroll', updateOverlayGeometry, true);\n\n        return () => {\n            window.removeEventListener('resize', updateOverlayGeometry);\n            window.removeEventListener('scroll', updateOverlayGeometry, true);\n        };\n    }, [isInactive, open, updateOverlayGeometry]);\n\n    useEffect(() => {\n        if (open && isInactive) {\n            closeOverlay();\n        }\n    }, [closeOverlay, isInactive, open]);\n\n    const shouldMorphOverlay = !prefersReducedMotion && hasOverlayGeometry;\n    const motionInitial = shouldMorphOverlay\n        ? {\n            opacity: 0.92,\n            scale: overlayScale,\n        }\n        : { opacity: 0 };\n    const motionExit = shouldMorphOverlay\n        ? {\n            opacity: 0,\n            scale: overlayScale,\n        }\n        : { opacity: 0 };\n    const triggerPressHandler = open ? closeOverlay : openOverlay;\n\n    return (\n        <>\n            <Button\n                ref={ mergeRefs(triggerRef, ref) }\n                variant=\"transparent\"\n                size=\"unset\"\n                iconOnly\n                className={ cn(styles.trigger, className) }\n                style={ triggerStyle }\n                data-readonly={ isReadOnly || undefined }\n                data-overlay-open={ isOverlayVisible || undefined }\n                isDisabled={ isDisabled }\n                aria-label={ ariaLabel }\n                aria-labelledby={ ariaLabelledBy }\n                aria-disabled={ isReadOnly || undefined }\n                aria-haspopup={ isReadOnly ? undefined : 'dialog' }\n                aria-expanded={ isReadOnly ? undefined : isOverlayVisible }\n                aria-controls={ isOverlayVisible ? overlayId : undefined }\n                tabIndex={ isReadOnly ? -1 : undefined }\n                onPress={ isReadOnly ? undefined : triggerPressHandler }\n            >\n                <AnglePreview normalizedDegrees={ angle.normalizedDegrees } size={ size } />\n            </Button>\n\n            <Show when={ portalTarget }>\n                { target => createPortal(\n                    <AnimatePresence\n                        initial={ false }\n                        onExitComplete={ () => {\n                            if (!isOverlayVisible) {\n                                setOverlayGeometry(null);\n                            }\n                        } }\n                    >\n                        <Show when={ isOverlayVisible ? overlayGeometry : null }>\n                            { visibleOverlayGeometry => (\n                                <div className={ styles.overlayLayer } data-modal-clickout-layer>\n                                    <motion.div\n                                        className={ styles.overlay }\n                                        initial={ { opacity: 0 } }\n                                        animate={ { opacity: 1 } }\n                                        exit={ { opacity: 0 } }\n                                        transition={ OVERLAY_TRANSITION }\n                                        onPointerDown={ underlayProps.onPointerDown }\n                                    />\n\n                                    <FocusScope contain restoreFocus>\n                                        <motion.div\n                                            className={ cn(styles.floatingDial, popoverClassName) }\n                                            style={ {\n                                                '--reforma-angle-size': `${ resolvedExpandedSize }px`,\n                                                left: visibleOverlayGeometry.left,\n                                                top: visibleOverlayGeometry.top,\n                                            } as CSSProperties }\n                                            initial={ motionInitial }\n                                            animate={ { opacity: 1, scale: 1 } }\n                                            exit={ motionExit }\n                                            transition={ OVERLAY_TRANSITION }\n                                        >\n                                            <div\n                                                { ...floatingDialProps }\n                                                ref={ overlayRef }\n                                                id={ overlayId }\n                                                className={ styles.dialogSurface }\n                                            >\n                                                <AngleDial\n                                                    angle={ angle }\n                                                    presets={ presets }\n                                                    snap={ snap }\n                                                    snapThresholdDeg={ snapThresholdDeg }\n                                                    isDisabled={ isDisabled }\n                                                    isReadOnly={ isReadOnly }\n                                                    step={ step }\n                                                    precision={ precision }\n                                                    valueRange={ valueRange }\n                                                    presetBehavior={ presetBehavior }\n                                                    controlSize={ resolvedExpandedSize }\n                                                    showInlineInput={ showInlineInput }\n                                                    ariaLabel={ ariaLabel }\n                                                    ariaLabelledBy={ ariaLabelledBy }\n                                                    autoFocus\n                                                />\n                                            </div>\n                                        </motion.div>\n                                    </FocusScope>\n                                </div>\n                            ) }\n                        </Show>\n                    </AnimatePresence>,\n                    target\n                ) }\n            </Show>\n        </>\n    );\n}\n\nAngleControl.displayName = 'AngleControl';\n"],"names":["OVERLAY_TRANSITION","MOTION_EASE_UI","getOverlayGeometry","rect","expandedSize","AngleControl","ref","value","defaultValue","onChange","onChangeEnd","unit","presets","snap","snapThresholdDeg","isDisabled","isReadOnly","min","max","step","precision","valueRange","presetBehavior","size","DEFAULT_ANGLE_EXPANDED_SIZE","showInlineInput","className","popoverClassName","style","isOpen","defaultOpen","onOpenChange","ariaLabel","ariaLabelledBy","triggerRef","useRef","overlayRef","overlayGeometry","setOverlayGeometry","useState","open","setOpen","useControlledState","prefersReducedMotion","useReducedMotion","overlayId","useId","angle","useAngleState","isInactive","portalTarget","hasOverlayGeometry","isOverlayVisible","overlayScale","resolvedExpandedSize","triggerStyle","ANGLE_PREVIEW_GEOMETRY","updateOverlayGeometry","useCallback","openOverlay","closeOverlay","overlayProps","underlayProps","useOverlay","dialogProps","useDialog","floatingDialProps","mergeProps","useEffect","shouldMorphOverlay","motionInitial","motionExit","triggerPressHandler","_Fragment","_jsx","Button","mergeRefs","cn","styles","AnglePreview","Show","target","createPortal","AnimatePresence","visibleOverlayGeometry","_jsxs","motion","FocusScope","AngleDial"],"mappings":"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"}

package/dist/AngleControl/AngleControl.module.css

@@ -0,0 +1 @@
+@layer components{.AngleControl_trigger_RGL7pa{--reforma-angle-preview-size: var(--spacing-64);--reforma-button-transform-pressed: none;border-radius:var(--radius-full);padding:0;width:var(--reforma-angle-preview-size, var(--spacing-30));min-width:var(--reforma-angle-preview-size, var(--spacing-30));height:var(--reforma-angle-preview-size, var(--spacing-30));color:inherit}.AngleControl_trigger_RGL7pa[data-focus-visible=true]{outline:var(--spacing-4) solid var(--color-primary-muted-border);outline-offset:0}.AngleControl_trigger_RGL7pa[data-overlay-open] .AngleControl_previewDial_XY6XSB{opacity:0}.AngleControl_trigger_RGL7pa[data-readonly]{cursor:default;pointer-events:none}.AngleControl_dial_dMsb00,.AngleControl_previewDial_XY6XSB{--reforma-angle-ring-bg: var(--color-surface);--reforma-angle-ring-border: var(--reforma-angle-ring-width, var(--spacing-2)) solid var(--color-secondary);--reforma-angle-preset: var(--color-secondary);--reforma-angle-preset-active: var(--color-primary);--reforma-angle-text: var(--color-secondary-muted-text);--reforma-angle-handle: var(--color-primary);display:inline-flex;position:relative;flex:0 0 var(--reforma-angle-size);justify-content:center;align-items:center;outline:none;width:var(--reforma-angle-size);height:var(--reforma-angle-size);color:var(--reforma-angle-text);-webkit-user-select:none;-moz-user-select:none;user-select:none}.AngleControl_dial_dMsb00{touch-action:none}.AngleControl_dial_dMsb00[data-disabled]{opacity:var(--opacity-disabled);cursor:default}.AngleControl_dial_dMsb00[data-readonly]{cursor:default}.AngleControl_previewDial_XY6XSB{pointer-events:none}.AngleControl_ring_hzlr9X{position:absolute;inset:0;box-shadow:0 0 0 var(--spacing-4) var(--color-surface);border:var(--reforma-angle-ring-border);border-radius:var(--radius-full);background:var(--reforma-angle-ring-bg)}.AngleControl_preset_ICXTfK{position:absolute;transform:translate(-50%,-50%);z-index:1;cursor:pointer;border:0;border-radius:var(--radius-full);background:transparent;padding:0;width:var(--spacing-20);height:var(--spacing-20)}.AngleControl_preset_ICXTfK:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:background-color var(--transition-duration-fast) var(--ease-in-out),transform var(--transition-duration-fast) var(--ease-in-out);border-radius:var(--radius-full);background:var(--reforma-angle-preset);width:var(--spacing-4);height:var(--spacing-4);content:""}.AngleControl_preset_ICXTfK:not(:disabled):hover:before{transform:translate(-50%,-50%) scale(1.5);background:var(--reforma-angle-preset-active)}.AngleControl_preset_ICXTfK:disabled{cursor:default}.AngleControl_valueInput_d5WY7x{position:relative;z-index:4;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:0;background:transparent;padding:0;width:5ch;min-width:0;pointer-events:auto;color:var(--reforma-angle-text);text-align:center;-webkit-user-select:text;-moz-user-select:text;font-weight:400;font-size:var(--text-xs);line-height:var(--leading-xs);font-family:Onest,sans-serif;letter-spacing:0;user-select:text}.AngleControl_valueInput_d5WY7x:focus{color:var(--color-text)}.AngleControl_valueInput_d5WY7x[data-preview]{color:var(--color-primary-muted-text)}.AngleControl_sliderInput_NeX5jc{position:absolute;opacity:0;border:0;padding:0;width:1px;height:1px;pointer-events:none}.AngleControl_handle_QXbXLa{position:absolute;transform:translate(-50%,-50%);z-index:3;transition:box-shadow var(--transition-duration-fast) var(--ease-in-out),transform var(--transition-duration-fast) var(--ease-in-out);cursor:grab;box-shadow:0 0 0 var(--spacing-1, 1px) var(--color-surface);border-radius:var(--radius-full);background:var(--reforma-angle-handle);width:var(--reforma-angle-handle-size);height:var(--reforma-angle-handle-size)}.AngleControl_handle_QXbXLa:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:var(--radius-full);width:calc(var(--reforma-angle-handle-size) * 2);height:calc(var(--reforma-angle-handle-size) * 2);content:""}.AngleControl_previewDial_XY6XSB .AngleControl_handle_QXbXLa{cursor:inherit}.AngleControl_dial_dMsb00[data-disabled] .AngleControl_handle_QXbXLa,.AngleControl_dial_dMsb00[data-readonly] .AngleControl_handle_QXbXLa{cursor:default}.AngleControl_dial_dMsb00[data-dragging] .AngleControl_handle_QXbXLa{cursor:grabbing}.AngleControl_dial_dMsb00:not([data-disabled]):not([data-readonly]) .AngleControl_handle_QXbXLa:hover{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 0 var(--spacing-1, 1px) var(--color-surface),0 0 0 var(--spacing-4) var(--color-primary-muted-light)}.AngleControl_overlayLayer_j4dmgq{position:fixed;z-index:var(--z-popover);inset:0;pointer-events:none}.AngleControl_overlay_WV8c4c{position:absolute;inset:0;background:transparent;pointer-events:auto}.AngleControl_floatingDial_YlF1Ix{display:flex;position:fixed;justify-content:center;align-items:center;transform-origin:top right;will-change:transform,opacity;outline:none;width:var(--reforma-angle-size);height:var(--reforma-angle-size);pointer-events:auto}.AngleControl_dialogSurface_tJjzTs{display:flex;justify-content:center;align-items:center;outline:none;width:100%;height:100%}}

package/dist/AngleControl/AngleControl.module.css.js

@@ -0,0 +1,30 @@
+const l = "AngleControl_trigger_RGL7pa", e = "AngleControl_previewDial_XY6XSB", n = "AngleControl_dial_dMsb00", o = "AngleControl_ring_hzlr9X", r = "AngleControl_preset_ICXTfK", t = "AngleControl_valueInput_d5WY7x", a = "AngleControl_sliderInput_NeX5jc", g = "AngleControl_handle_QXbXLa", i = "AngleControl_overlayLayer_j4dmgq", s = "AngleControl_overlay_WV8c4c", _ = "AngleControl_floatingDial_YlF1Ix", c = "AngleControl_dialogSurface_tJjzTs", d = {
+  trigger: l,
+  previewDial: e,
+  dial: n,
+  ring: o,
+  preset: r,
+  valueInput: t,
+  sliderInput: a,
+  handle: g,
+  overlayLayer: i,
+  overlay: s,
+  floatingDial: _,
+  dialogSurface: c
+};
+export {
+  d as default,
+  n as dial,
+  c as dialogSurface,
+  _ as floatingDial,
+  g as handle,
+  s as overlay,
+  i as overlayLayer,
+  r as preset,
+  e as previewDial,
+  o as ring,
+  a as sliderInput,
+  l as trigger,
+  t as valueInput
+};
+//# sourceMappingURL=AngleControl.module.css.js.map

package/dist/AngleControl/AngleControl.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AngleControl.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/AngleControl/AngleDial.d.ts

@@ -0,0 +1,27 @@
+import type { Ref } from 'react';
+import type { AnglePrecision, AnglePresetBehavior, AngleValueRange } from './angle';
+import type { AngleState } from './useAngleState';
+export interface AngleDialProps {
+    ref?: Ref<HTMLDivElement | null>;
+    angle: AngleState;
+    presets?: readonly number[];
+    snap?: boolean;
+    snapThresholdDeg?: number;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    step?: number;
+    precision?: AnglePrecision;
+    valueRange?: AngleValueRange;
+    presetBehavior?: AnglePresetBehavior;
+    controlSize?: number;
+    showInlineInput?: boolean;
+    className?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    autoFocus?: boolean;
+}
+export declare function AngleDial({ ref, angle, presets, snap, snapThresholdDeg, isDisabled, isReadOnly, step, precision, valueRange, presetBehavior, controlSize, showInlineInput, className, ariaLabel, ariaLabelledBy, autoFocus, }: AngleDialProps): import("react").JSX.Element;
+export declare namespace AngleDial {
+    var displayName: string;
+}
+//# sourceMappingURL=AngleDial.d.ts.map

package/dist/AngleControl/AngleDial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AngleDial.d.ts","sourceRoot":"","sources":["../../src/AngleControl/AngleDial.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAiB,GAAG,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AACpF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjC,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,EACtB,GAAG,EACH,KAAK,EACL,OAA+B,EAC/B,IAAY,EACZ,gBAAoB,EACpB,UAAU,EACV,UAAU,EACV,IAAI,EACJ,SAAS,EACT,UAAwB,EACxB,cAA4B,EAC5B,WAAW,EACX,eAAsB,EACtB,SAAS,EACT,SAAmB,EACnB,cAAc,EACd,SAAS,GACZ,EAAE,cAAc,+BAuKhB;yBAzLe,SAAS"}